<template>
    <div>
        <el-dialog :visible.sync="value" :show-close="false" center>
            <el-form ref="form" :model="classes" hide-required-asterisk status-icon>

                <el-form-item prop="classesName" label="班级名称" :rules="[{required:true,message:'请输入班级名称',trigger:'blur'},{min:2,max:10,message:'2~10个字符',trigger:'blur'}]">
                    <el-input v-model="classes.classesName" placeholder="请输入班级名称" :maxlength="10" show-word-limit style="width: 500px"></el-input>
                </el-form-item>

                <el-form-item prop="options" label="所属阶段" v-if="!classes.id" >
                    <el-cascader v-model="options" :options="computed_vocational_list" :props="{emitPath:true,value:'id'}" placeholder="请选择集团/校区/专业/阶段" :show-all-levels="true" collapse-tags clearable filterable style="width: 500px;margin-right: 5px">
                        <template slot-scope="{ node, data }">
                            <span>{{ data.label }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                </el-form-item>

                <el-form-item prop="startTime" v-if="!classes.id" label="开班日期" :rules="[{required:true,message:'请选择开班日期',trigger:'change'}]">
                    <el-date-picker v-model="classes.startTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择开班日期" type="date" style="width: 500px"></el-date-picker>
                </el-form-item>

                <el-form-item prop="endTime"  v-if="!classes.id" label="结课日期" :rules="[{required:true,message:'请选择结课日期',trigger:'change'}]">
                   <el-date-picker v-model="classes.endTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择结课日期" type="date" style="width: 500px"></el-date-picker>
                </el-form-item>

            </el-form>

            <template slot="footer">
                <el-button type="primary" icon="el-icon-plus" v-loading.fullscreen.lock="fullscreenLoading" @click="handleSubmit">提交</el-button>
            </template>

        </el-dialog>
    </div>
</template>

<script>
    import { searchCasVocationalList } from '@/api/principal/school-manager/school'
    import { saveOrUpdateClasses } from '@/api/quality/classes'
    export default {
        name: "classes-child",
        data(){
            return {
                value : false,
                fullscreenLoading:false,
                casVocationalList:[],
                options:[],
                classes:{}
            }
        },
        watch:{
            value(data){
                if(data){
                    this.fullscreenLoading = true;
                    this.options = [];
                    searchCasVocationalList().then(res=>{
                      this.casVocationalList = [];
                      this.casVocationalList = res.data.data;
                      this.fullscreenLoading = false;
                    })
                }
            }
        },
        computed:{
            computed_vocational_list(){
                let data = this.casVocationalList;
                data.forEach(school=>{
                    if(school && school.children){
                        school.children.forEach(subSchool=>{
                            if(subSchool && subSchool.vocationalChildren){
                                subSchool.children = subSchool.vocationalChildren;
                            }
                        })
                    }
                });
                return data;
            }
        },
        methods:{
            handleSubmit(){

                if(this.classes.id == null && this.options.length == 0){
                    this.$message.error({message:'请选择集团/校区/专业/阶段',center:true});
                    return false;
                }

                this.$refs['form'].validate(valid=>{
                    if(valid){
                        this.classes.schoolId = this.options[0];
                        this.classes.subSchoolId = this.options[1];
                        this.classes.vocationalId = this.options[2];
                        this.classes.stageId = this.options[3];
                        this.fullscreenLoading = true;
                        saveOrUpdateClasses(this.classes).then(res=>{
                            this.fullscreenLoading = false;
                            this.value = false;
                            this.$parent.getClassesList(this.$parent.params);
                        })
                    }else{
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>